<template>
	<view class="label">
		<view class="label-box">
			<view class="label-header">
				<view class="label-title">
					我的频道
				</view>
				<view class="label-edit" @click="editLabel">
					{{is_edit?'保存':'编辑'}}
				</view>
			</view>
			<view class="label-content">
				<view v-for="(item,index) in my_label" :key="index" class="label-content_item">
					{{item.name}}
					<uni-icons v-if="is_edit" @click="del(index)" type="clear" class="icons-close" size="18" color="#f07373"></uni-icons>
				</view>
				<view class="no-data" v-if="my_label.length===0">
					设置关注频道,查看喜欢的内容
				</view>
			</view>
		</view>
		<!-- 下 -->
		<view class="label-box">
			<view class="label-header">
				<view class="label-title">
					频道推荐
				</view>
			</view>
			<view class="label-content">
				<view v-for="(item,index) in recommend_label" :key="index" class="label-content_item">
					{{item.name}}
					<uni-icons v-if="is_edit" @click="add(index)" type="plus-filled" class="icons-close" size="18" color="#f07373"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				is_edit:false,
				my_label:[],
				recommend_label:[]
			}
		},
		onLoad(){
			this.getLabel()
		},
		methods: {
			// 标签请求
			getLabel(){
				this.$api.get_label({
					type:'all'
				}).then((res)=>{
					let result = res.data
					console.log(result)
					this.my_label = result.filter(item => item.current)
					this.recommend_label = result.filter(item =>!item.current)
					// console.log(this.my_label)
					// console.log(this.recommend_label)
				})
			},
			// 标签更新
			setUpdateLabel(label){
				let NewArr = []
				label.forEach(item=>{
					NewArr.push(item._id)
				})
				// console.log(NewArr)
				this.$api.update_label({
					label:NewArr
				}).then((res)=>{
					console.log(res)
					//自定义事件只能再打开的页面触发
					uni.$emit('labelChange')
				})
			},
			//标签编辑
			editLabel(){
				if(this.is_edit){
					this.is_edit =false
					//将选定的频道传给更新函数
					this.setUpdateLabel(this.my_label)
				}else{
					this.is_edit =true
				}
			},
			del(index){
				this.recommend_label.push(this.my_label[index])
				this.my_label.splice(index,1)
			},
			add(index){
				this.my_label.push(this.recommend_label[index])
				this.recommend_label.splice(index,1)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;

		.label {
			.label-box {
				background-color: #fff;
				margin-bottom: 10px;

				.label-header {
					display: flex;
					justify-content: space-between;
					padding: 10px 15px;
					font-size: 14px;
					// color: #666;
					border-bottom: 1px #f5f5f5 solid;

					.label-title {
						font-weight: 700;
						font-size: 16px;
					}

					.label-edit {
						color: $mk-base-color;
						font-weight: 600;
					}
				}

				.label-content {
					display: flex;
					flex-wrap: wrap;
					padding: 15px;

					.label-content_item {
						position: relative;
						border: 1px #999 solid;
						border-radius: 5px;
						margin: 10px 10px 0 0;
						padding: 2px 5px;
						background-color: #f5f5f5;
						font-size: 14px;
						.icons-close{
							position: absolute;
							top: -9px;
							right: -9px;
							background-color: #fff;
							border-radius: 50%;
						}
					}
				}
			}
		}
	}
	.no-data{
		width: 100%;
		text-align: center;
		color: #999;
		font-size: 14px;
		padding: 8px 0;
	}
</style>
